<!--
 * @Author: gyh
 * @Date: 2024-04-28 11:06:47
 * @LastEditTime: 2024-05-13 10:01:58
-->

<script setup lang="ts">
import { getBannerApi, getCategoryApi, getHotApi } from '@/services/home'
import type { bannerItem, categoryItem, hotItem } from '@/types/home'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import CustomNav from './components/CustomNav.vue'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
import PageSkeleton from './components/PageSkeleton.vue'
import { useGuessLike } from '@/composables'

onLoad(async () => {
  isLoading.value = true
  await Promise.all([getBanner(), getCategory(), getHot()])
  isLoading.value = false
})

const isLoading = ref(false)

const bannerList = ref<bannerItem[]>([]),
  getBanner = async () => {
    const params = { distributionSite: 1 }
    const res = await getBannerApi(params)
    if (res.code) bannerList.value = res!.result
  }

const categoryList = ref<categoryItem[]>([]),
  getCategory = async () => {
    const params = {}
    const res = await getCategoryApi(params)
    if (res.code) categoryList.value = res!.result
  }

const hotList = ref<hotItem[]>([]),
  getHot = async () => {
    const params = {}
    const res = await getHotApi(params)
    if (res.code) hotList.value = res!.result
  }

const { guessRef, onScrollToLower } = useGuessLike(),
  isTriggered = ref(false),
  onPullDownRefresh = async () => {
    isTriggered.value = true

    await Promise.all([getBanner(), getCategory(), getHot(), guessRef.value.resetData()])
    isTriggered.value = false
  }
</script>

<template>
  <!-- 自定义导航栏 -->
  <CustomNav />
  <scroll-view
    class="scroll_view"
    @scrolltolower="onScrollToLower"
    @refresherrefresh="onPullDownRefresh"
    :refresher-triggered="isTriggered"
    refresher-enabled
    scroll-y
  >
    <PageSkeleton v-if="isLoading" />
    <template v-else>
      <!-- 轮播图 -->
      <GyhSwiper :list="bannerList" />
      <!-- 商品分类 -->
      <CategoryPanel :list="categoryList" />
      <!-- 热门推荐 -->
      <HotPanel :list="hotList" />
      <!-- 猜你喜欢 -->
      <GyhGuess ref="guessRef" />
    </template>
  </scroll-view>
</template>

<style lang="scss">
/* #ifdef APP-PLUS || H5 */
#app,
/* #endif */
page {
  background: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;

  .scroll_view {
    height: 0;
    flex: 1;
  }
}
</style>
